import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { PropTypes } from 'prop-types';
import {Flex, ListView} from 'antd-mobile';
import { observer } from 'mobx-react';

import CommendListData from '../../models/commend_list';

@observer
class Bargain extends Component {
  static propTypes = {
    dispatch: PropTypes.func
  }
  constructor (props) {
    super(props)
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    })
    this.state = {
      dataSource: dataSource.cloneWithRows({}),
      isLoading: true,
    }
  }

  componentDidMount () {
    CommendListData.getFetchList().then(() => {
      console.log(CommendListData.list_data.slice());
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(CommendListData.list_data.slice()),
        isLoading: false,
      })
    })
  }

  renderList() {
    const row = (dataRow) => {
      return (
        <div style={{padding: "0 15px", borderBottom: "1px solid #e1e1e1"}}>
          <div style={{ display: '-webkit-box', display: 'flex', padding: '15px 0' }}>
            <img style={{ height: '64px',width: '64px', marginRight: '15px' }} src={dataRow.image} alt="" />
            <div style={{ lineHeight: 1 }}>
              <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{dataRow.name}</div>
              <div>
                <span> {dataRow.desc} </span>
                <span style={{ fontSize: '20px', color: '#FF6E27' }}>{dataRow.single_price}</span>
                <span style={{marginLeft: '5px'}}>¥</span>
              </div>
            </div>
          </div>
        </div>
      )
    }
    return (
      <div>
        <div
          style={{
            lineHeight: '50px',
            color: '#888',
            fontSize: 18,
            borderBottom: '1px solid #F6F6F6',
            marginLeft: '13px',
          }}
        > 推荐产品 </div>
        <ListView
          dataSource={this.state.dataSource}
          renderFooter={() => (<div style={{padding: 15, textAlign: 'center'}}>
            {this.state.isLoading ? '加载中' : '加载完成'}
          </div>)}
          renderRow={row}
          useBodyScroll
          pageSize={4}
          scrollRenderAheadDistance={500}
          scrollEventThrottle={20}
          onEndReachedThreshold={10}
        />
      </div>

    )
  }
  render () {
    return (
      <div>
        {CommendListData.list_data.length === 0 ? (<h1>暂时没有商品</h1>) : this.renderList()}
      </div>
    )
  }
}

export default Bargain